<!--  -->
<template>
  <div class="body">
    <myheader>
      <div slot="left">
        <van-icon name="cross" size="6vw" @click="$router.go(-1)" />
      </div>
      <div slot="right">帮助</div>
    </myheader>
    <div class="container">
      <div class="title">欢迎登陆微笑中医</div>
      <div class="input">
        <van-form validate-first @failed="onFailed" @submit="onSubmit">
          <myinp
            class="myinp"
            placeholder="请输入手机号"
            :rules="/^1\d{10}$/"
            type="text"
            v-model="user.username"
            msg="账号格式有误"
            ><span slot="left" style="display: flex">
              <i>+86</i>
              <van-icon name="arrow"></van-icon>
            </span>
          </myinp>
          <!-- 密码正则6-18位必须有字母和数字:/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z\\W]{6,18}$/ -->
          <myinp
            class="myinp"
            placeholder="请输入密码"
            v-model="user.password"
            type="password"
            :rules="/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z\\W]{6,18}$/"
            msg="请输入6-18位密码(包含字母数字)"
          ></myinp>

          <div style="margin: 16px">
            <p class="tips">
              没有账号？
              <a href="#/register" class="">去注册</a>
            </p>
            <van-button color="#FFC107" block type="info" native-type="submit"
              >登录</van-button
            >
          </div>
          <div class="problem">
            <span>验证码登录</span>
            <span>遇到问题</span>
          </div>

          <div class="bottom">
            登录代表同意微笑中医用户协议,隐私策略,并授权使用您的账号信息,以便统一管理
          </div>
        </van-form>
      </div>
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等)
import myinp from "@/components/myinput.vue";
import myheader from "@/components/header.vue";
import { Toast } from "vant";

export default {
  // import引入的组件需要注入到对象中才能使用
  components: { myinp, myheader },
  data() {
    return {
      user: {
        username: "",
        password: "",
      },
    };
  },

  computed: {},

  watch: {},

  methods: {
    onSubmit() {
      this.$http
        .post(`/user/login`, {
          username: this.user.username,
          password: this.user.password,
        })
        .then((res) => {
          if (res.data.code === 200) {
            let userId=res.data.result;
            localStorage.setItem("user", userId);
            Toast.success("登陆成功");
            setTimeout(() => {
              this.$router.push({path:`/personal/${userId}`});
            }, 1000);
          } else {
            Toast.fail(res.data.msg);
          }
        });
    },
    validator(val) {
      return /1\d{10}/.test(val);
    },
    // 异步校验函数返回 Promise
    asyncValidator(val) {
      return new Promise((resolve) => {
        Toast.loading("验证中...");

        setTimeout(() => {
          Toast.clear();
          resolve(/\d{6}/.test(val));
        }, 1000);
      });
    },
    onFailed(errorInfo) {
      console.log("failed", errorInfo);
    },
    login() {},
  },
  mounted() {},
};
</script>
<style lang='less' scoped>
/* @import url(); 引入公共css类 */
.body {
  background-color: #fff;
  height: 100vh;
}
.container {
  padding: 0 20px;
}
.title {
  font-size: 22px;
  margin-top: 30px;
}
.input {
  margin-top: 60px;
  .myinp:nth-child(2) {
    margin-top: 40px;
  }
}
.tips {
  text-align: right;
  margin-bottom: 60px;

  a {
    color: #3385ff;
  }
}
.problem {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.bottom {
  font-size: 11px;
  color: #958f8f;
  position: absolute;
  bottom: 10px;
}
</style>